<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path;
%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<title>云校通-教师-选修课</title>
<jsp:include page="/WEB-INF/page/common/_header.jsp"></jsp:include>
<body ontouchstart id="wd_xkpt">
	<div class="weui_tab tab-bottom">
	    <div class="page-bd">
	      <ul>
	        <li style="margin-bottom: 0; border-bottom: 1px solid #e7dede;">
	            <div class="weui-header weui-flex w_title js-category">
	              <div class="weui-header-left">
	                <a href="<%=basePath %>/xs?sid=${user.parent.studentId}" class="icon icon-109">返回</a>
	              </div>
	              <p class="weui-header-title">${term.termName }</p>
	            </div>
	        </li>
	      </ul>
	    </div>
		<div class="weui_tab_bd">
			<div class="bg-f8 f-16 p10 f-red">
      			亲爱的家长，本学期选修课选报时间从<fmt:formatDate type="both"  value="${date.startTime}"/>到<fmt:formatDate type="both"  value="${date.endTime}"/>截止，请在此时间段尽快选报，谢谢您的支持!
      		</div>
      		<div id="tcTips" class="f-green p10 hide">
      			亲爱的家长，您小孩被选入特长班，无需再选报选修课。如果您想要选报选修课，特长班名额会自动取消！
      		</div>
       		<div class="weui_panel_bd" style="margin-bottom: 55px;">
                <div class="weui_media_box weui_media_small_appmsg" id="signedList">
                 	
            	</div>
			</div>
		</div>
	</div>
	
	<!--弹窗-->				
	<div class="weui_mask ueureiu weui_mask_visible" style="display: none;">
	</div>
	<div id="xs_div_box" class="weui_tab tab-bottom" style="display:none; z-index:10; background-color: #f8f8f8;">
		<div class="weui_tab_bd">
	        <div class="weui-header bg-blue"> 
	        	<div class="weui-header-left" onclick="closeCourse()"> <a class="icon icon-109 f-white">取消</a>  </div>
				<h1 class="weui-header-title">课程列表</h1>
			</div>
	        <!--下拉选择-->
	        <div class="page-bd" id="courseList">  
	    	</div>
	    	<script id="student-table-template" type="text/x-handlebars-template">
                <div>
					{{#each list}}
                    	<div class="weui_cells" style="margin: 0;">
                    		<div class="weui_cell">
								<div class="weui_cell_hd mr10">
									<label class="weui_cells_checkbox weui_check_label" for="{{id}}_{{classDate}}">
										<div class="weui_cell_hd">
											{{#compare limitNum studentSignCount}}
											<input type="checkbox" class="weui_check" onclick="checkedCourse(this)" value="{{id}}_{{classDate}}_{{courseName}}" id="{{id}}_{{classDate}}">
			        						<i class="weui_icon_checked"></i>
											{{/compare}}
										</div>
									</label>
								</div>
								<div class="weui_cell_bd weui_cell_primary">
									<p>{{courseName}}（{{studentSignCount}}/{{limitNum}}）</p>
									<p style="font-size: 0.9rem;color: #fb1919;">上课时间：{{classDate}}</p>
								</div>
								<div class="weui_cell_bd">
									<a href="javascript:;" onclick="showCourseDetail({{id}})">查看</a>
								</div>
							</div>
							<div style="display: none;">
								<ul class="list_3">
								</ul>
							</div>
						</div>
					{{/each}}
				</div>
	         </script>
	       </div>
	   		<!--End下拉选择-->
	   		<div class="weui_tabbar">
				<div class="fsdx_tabbar">
		            <span class="left f-red" id="checkCourse">请选择</span>
		            <span class="right" onclick="submitCourse()"><a href="javascript:">提交</a></span>
		        </div>
			</div>
		</div>
	</div>
	<!-- 学生组织架构 end -->
	
	<!-- 课程详情 start-->
	<div id="tjjsqj" class="weui_tab tab-bottom" style="display:none; z-index:6000; background-color: #f8f8f8;">
		<div class="weui-header bg-blue"> 
			<h1 class="weui-header-title">课程详情</h1>
	  		<div class="weui-header-right"><a onclick="closeCourseDetail()" href="javascript:;" class="icon f-white">关闭</a></div>
	    </div>
	    <div class="weui_tab_bd" id="detailItem">
		    
		</div>
	</div>
	<!-- 课程详情 end -->
	<!--End弹窗-->
</body>
<jsp:include page="/WEB-INF/page/common/_footer.jsp"></jsp:include>
<script type="text/javascript">
$(function() {
	loadSignedList();
})
function closeCourse(){
	$('.ueureiu').hide();
	$("#xs_div_box").hide();
}
function loadSignedList() {
	$.ajax({
   		url: basePath + "/xs/interest/course/signed/list",
   		type: 'GET',
   		dataType : "json",
   		success: function(data) {
   			if(data != null) {
   				var html = '';
   				for(var i in data) {
   					html += '<div class="weui_cells weui_cells_1">\
								<div class="weui_cell">\
							<div class="weui_cell_bd">\
								<p>'+data[i].studentName+'</p>\
							</div>';
							if(!(data[i].courseList.length > 0 && data[i].courseList[0].courseType == 2)) {
								if("${isOk}" == "true") {
									html += '<div class="weui_cell_bd weui_cell_primary weui_cell_ft">\
										<span class="icon icon-99 f20 f-blue"></span>\
										<a href="javascript:;" onclick="chooseClass('+data[i].studentId+',this)">选课</a>\
									</div>';
								}
							}
						html += '</div>';
						if(data[i].courseList.length == 0) {
							html += '<div class="weui_cell">暂无</div>';
						}
						for(var j in data[i].courseList) {
							var itm = data[i].courseList[j];
							if(j == 0) {
								html += '<div class="weui_cell">\
									<div class="weui_cell_bd weui_cell_primary"><b>上课时间</b></div>\
									<div class="weui_cell_bd">\
										<b>'+(itm.courseType == 1 ? "选修课" : "课程名称")+'</b>\
									</div>\
								</div>';
							}
							html += '<div class="weui_cell xkpt-lesson">\
										<div class="weui_cell_bd">\
											<p>'+itm.classDate+'</p>\
										</div>\
										<div class="weui_cell_bd weui_cell_primary weui_cell_ft">\
											<a href="<%=basePath%>/xs/interest/course/detail/'+itm.courseId+'?sid=${user.parent.studentId}">'+itm.courseName+'</a>\
										</div>\
									</div>';
						}
					html += '</div>';
   				}
   				$("#signedList").html(html);
   			}
   		},
   		error: function(data) {
   			alert("系统异常,请联系管理员");
   		}
   });
}

function initChooseCourse(thiz) {
	$.ajax({
   		url: basePath + "/xs/interest/course/signCourseMap",
   		type: 'POST',
   		dataType : "json",
   		success: function(data) {
			loadStudentHtml({list: data.data});
   		},
   		error: function(data) {
   			alert("系统异常,请联系管理员");
   		}
	});
}
var stuId;
function chooseClass(studentId,thiz) {
	stuId = studentId;
	var obj = $(thiz);
	initChooseCourse(thiz);
	$('.ueureiu').show();
	$("#xs_div_box").show();
}

function checkedCourse(thiz) {
	var obj = $(thiz.closest("#courseList"));
	var list = obj.find("input:checked");
	if(thiz.checked) {
		for(var i=0; i < list.length; i++) {
			if(list[i].value != thiz.value) {
				var d1 = thiz.value.split("_")[1];
				var d2 = list[i].value.split("_")[1];
				if(isRepeatClassDate(d1,d2)) {
					$.alert("不能选择同一天的课程", "");
					thiz.checked = false;
					break;
				}
			}
		}
	}
	if(list.length == 1 && list[0].value.split("_")[1].split(",").length == 1) {
		$("#checkCourse").addClass("f-red").removeClass("f-blue").html("还可以选择一门课程");
		return;
	}
	if(obj.find("input:checked").length > 0) {
		$("#checkCourse").addClass("f-blue").removeClass("f-red").html("已选择");
	}else {
		$("#checkCourse").addClass("f-red").removeClass("f-blue").html("请选择");
	}
}

var isSubmit = true;
function submitCourse() {
	var objInput = $("#courseList").find("input:checked");
	var courseArray = [];
	$(objInput).each(function(i,v){
		var varray = v.value.split("_");
		if(varray[0].length>0) {
			courseArray.push({
				courseId: varray[0], 
				courseName: varray[2], 
				classDate: varray[1]
			});
		}
	});
	if(!stuId || courseArray.length == 0) return;
	var dataObj = {studentId: stuId, list: courseArray}
	for(var i in courseArray) {
		i = parseInt(i);
		if(i < courseArray.length - 1) {
			if(isRepeatClassDate(courseArray[i].classDate,courseArray[i + 1].classDate)) {
				$.alert("不能选择同一天的课程", "");
				return;
			}
		}
	}
	var text = "确认提交?";
	if($(".xkpt-lesson").length > 0) {
		text = "确认修改课程？";
	}
	$.confirm(text, "", function() {
		if(!isSubmit) return;
		isSubmit = false;
		$.ajax({
			url: basePath + "/xs/interest/course/signSubmit",
	   		type: 'POST',
	   		dataType : "json",
	   		contentType: "application/json",
	   		data: JSON.stringify(dataObj),
	   		success: function(data) {
	   			isSubmit = true;
	   			if(data.code == '000') {
	   				$.toast("提交成功");
	   				setTimeout(function() {
	   					closeCourse();
	   					loadSignedList();
					}, 1000);
	   			}else {
	   				$.alert(data.msg, "");
	   			}
	   		},
	   		error: function(data) {
	   			isSubmit = true;
	   			alert("系统异常,请联系管理员");
	   		}
		});
	}, function() {
    	return;
    });
}

function loadStudentHtml(studentData) {
	var myTemplate = Handlebars.compile($("#student-table-template").html());
	Handlebars.registerHelper("equal", function(v1,v2,options) {
		if(v1 == v2) {
			//满足添加继续执行
			return options.fn(this);
		}else {
			//不满足条件执行{{else}}部分
			return options.inverse(this);
		}
	});
	Handlebars.registerHelper("compare", function(v1,v2,options) {
		if(v1 > v2) {
			//满足添加继续执行
			return options.fn(this);
		}else {
			//不满足条件执行{{else}}部分
			return options.inverse(this);
		}
	});
	$('#courseList').html(myTemplate(studentData));
}

function showCourseDetail(courseId) {
	$.ajax({
   		url: basePath + "/xs/interest/course/detail/query",
   		type: 'POST',
   		dataType : "json",
   		data: {
   			courseId: courseId,
   		},
   		success: function(data) {
   			if(data != null) {
   				var html = '<div class="weui_cells mt0">\
	   				    <div class="weui_cell">\
	   				<div class="weui_cell_bd weui_cell_primary">\
	   					<span class="f-graybc">课程名称：</span>'+data.courseName+'\
	   				</div>\
	   			</div>\
	   			<div class="weui_cell">\
	   				<div class="weui_cell_bd weui_cell_primary">\
	   					<span class="f-graybc">授课老师：</span>'+data.classTeacher+'\
	   				</div>\
	   			</div>\
	   			<div class="weui_cell">\
	   				<div class="weui_cell_bd weui_cell_primary">\
	   					<span class="f-graybc">老师介绍：</span>'+data.teacherDesc+'\
	   				</div>\
	   			</div>\
	   			<div class="weui_cell">\
	   				<div class="weui_cell_bd weui_cell_primary">\
	   					<span class="f-graybc">上课地点：</span>'+data.classAddr+'\
	   				</div>\
	   			</div>\
	   			<div class="weui_cell">\
	   				<div class="weui_cell_bd weui_cell_primary">\
	   					<span class="f-graybc">上课时间：</span>'+data.classDate+'\
	   				</div>\
	   			</div>\
	   			<div class="weui_cell">\
	   				<div class="weui_cell_bd weui_cell_primary">\
	   					<span class="f-graybc">招收对象：</span>'+data.teachingObject+'\
	   				</div>\
	   			</div>\
	   			<div class="weui_cell">\
	   				<div class="weui_cell_bd weui_cell_primary">\
	   					<span class="f-graybc">上课限制人数：</span>'+data.limitNum+'\
	   				</div>\
	   			</div>\
	   			</div>\
	   			<div class="weui_cells borderLeft xtbg-add-list afterNone mt0">\
	   			<div class="weui_cell weui_cell_select">\
	   			    <div class="weui_cell_hd">\
	   			        <label class="weui_label">课程描述</label>\
	   			    </div>\
	   			</div>\
	   			<div class="weui-weixin-content p10">\
	   			    <p>'+data.courseDesc+'</p>';
	   			 	for(var i in data.attachList) {
	   			 		html+='<p><img src="${config.imgUrl }'+data.attachList[i].attachmentUrl+'" class="weixin"></p>';
	   			 	}
	   			html += '</div>\
	   			</div>';
	   			$("#tjjsqj").show();
	   			$("#detailItem").html(html);
   			}
   		},
   		error: function(data) {
   			alert("系统异常,请联系管理员");
   		}
   });
}
function closeCourseDetail(){
	$("#tjjsqj").hide();
	$("#detailItem").html('');
}
function isRepeatClassDate(d1, d2) {
	var ay1 = d1.split(",");
	var ay2 = d2.split(",");
	for(var i in ay1) {
		for(j in ay2) {
			if(ay1[i] == ay2[j]){
				return true;
			}
		}
	}
	return false;
}
</script>
</html>